
<template>
    <div class="table">
        <div class="crumbs">
            <el-breadcrumb separator="/">
                <el-breadcrumb-item><i class="el-icon-menu"></i> 产品</el-breadcrumb-item>
                <el-breadcrumb-item>类型管理</el-breadcrumb-item>
            </el-breadcrumb>
        </div>
        <div style="float: right;margin-bottom: 10px;">
            <el-button @click="back()" type="primary" :disabled="isBack">返回上级</el-button>
            <el-button @click="add()" type="primary"><i class="el-icon-plus"></i> 添加</el-button>
            <!-- <el-button @click="setTouch(1)" type="danger">禁用</el-button>
            <el-button @click="setTouch(0)" >启用</el-button> -->
        </div>
        <el-table :data="tableData" border style="width: 100%" @selection-change="handleSelectionChange" >
            <el-table-column type="selection" width="auto" min-width="80spx"></el-table-column>
            <el-table-column prop="name" label="名称" min-width="120spx">
            </el-table-column>
            <el-table-column prop="description" label="描述" min-width="100spx">
            </el-table-column>
            <el-table-column label="图标" min-width="156spx">
                <template scope="scope">
                    <img :src="scope.row.img" width="100" height="100">
                </template>
            </el-table-column>
            <el-table-column prop="createDate" label="创建时间" min-width="125spx" :formatter="formatterCreateDate"></el-table-column>
            <!-- <el-table-column prop="createDateName" label="创建时间" min-width="125spx" >
            </el-table-column> -->
            <el-table-column label="操作" min-width="245spx">
                <template scope="scope">
                    <el-button size="small"
                            @click="handleEdit(scope.$index, scope.row)">编辑</el-button>
                    <!-- <el-button type="danger" size="small" @click="handleTouch(1,scope.row.id)" v-if="scope.row.disabled != 1"  >禁用</el-button>
                    <el-button size="small" @click="handleTouch(0,scope.row.id)" v-if="scope.row.disabled == 1" >启用</el-button> -->
                    <el-button size="small" type="danger" :disabled="isButtom" 
                            @click="myRouter(scope.row.id)">进入子目录</el-button>
                    <!-- <el-button size="small" type="danger" :disabled="isButtom" 
                            @click="deleteKind(scope.row.id)">删除</el-button> -->
                </template>
            </el-table-column>
        </el-table>
        <div class="pagination">
            <el-pagination
               @size-change="handleSizeChange"
               @current-change="handleCurrentChange"
               :current-page="listQuery.pageNumber"
               :page-sizes="[10, 20, 50]"
               :page-size="listQuery.pageSize"
               layout="total, sizes, prev, pager, next, jumper"
               :total="total">
            </el-pagination>
        </div>

        <el-dialog :title="dailogTitle" :visible.sync="editDialogFormVisible">
          <div style="text-align:center;">
              <div style="text-align:left;width:90%;margin:0 auto;">
                  <el-form :model="entityForm" :rules="rules" ref="entityForm" label-width="100px" class="demo-ruleForm" style="width:90%;">
                       <el-form-item prop="id"  style="display:none;">
                         <el-input v-model="entityForm.id" placeholder="编号" ></el-input>
                      </el-form-item>
                      
                      <el-form-item prop="name"  label="类型名称">
                         <el-input v-model="entityForm.name" placeholder="类型名称"  ></el-input>
                      </el-form-item>
                      <el-form-item prop="description"  label="描述">
                         <el-input v-model="entityForm.description" placeholder="描述"  ></el-input>
                      </el-form-item>
                      <!-- <el-form-item prop="disabled" label="是否禁用">
                         <el-switch
                              v-model="entityForm.disabled"
                              on-color="#13ce66"
                              off-color="#ff4949"
                              on-value="1"
                              off-value="0" >
                          </el-switch>
                      </el-form-item> -->
                      <div>
                        <el-form-item type="file" prop="img"  label="图片">
                            <el-col :span="11">
                                <div style="border:1px solid #bfcbd9;line-height:80px;text-align:center;color:#bfcbd9;height:80px;">
                                <input type="file" id="uimg1" accept="image/gif,image/jpeg,image/bmp,image/png" @change="setValue1(uploadImg('#uimg1','#icon'))" style="position:absolute;left: 0px;rightAlpha: 0px;top: 0px;opacity: 0;filter: (opacity=0);z-index: 2;height:80px;"/>
                                <!-- <div id="icon">正面</div> -->
                                <span v-if="!entityForm.img">分类图片</span>
                                <img v-else :src="entityForm.img" style='width:70px;height: 70px;margin-top: 5px;' />
                                </div>
                                <el-input v-show="false" v-model="entityForm.img"></el-input>
                            </el-col>
                        </el-form-item>
                      </div>
                  </el-form>  
              </div>
          </div>
          <div style="clear:both;"></div>
          <div slot="footer" class="dialog-footer">
              <el-button @click="editDialogFormVisible=false">取消</el-button>
              <el-button  type="primary" @click="saveUpdate()">保存</el-button>
          </div>
      </el-dialog>
    </div>
</template>

<script>
    import VueCoreImageUpload  from 'vue-core-image-upload';
    import Vue from 'vue';

    export default {
        data() {
            return {
                tableData: [],
                productTypeIdOptions: [],
                listQuery: {
                    pageNumber: 1,
                    pageSize: 10,
                    param: {
                        pid: ''
                    },
                },
                total: 0,

                // for 产品分级
                pid:"",
                pids:[],  //被监听
                parent:{},
                isButtom:false,
                isBack:true,
                
                // propretis for dailog
                dailogTitle: '',
                editDialogFormVisible: false,
                addDialogFormVisible: false,
                
                headDialogVisible: false,
                parentOption: [
                  
                ],
                selectDisabled:false,
                multipleSelection: [],
                entityForm: {
                  "id": '',
                  "pid": '',
                  "name": "",
                  "description": "",
                  "img": '',
                  // "disabled":0,
                },
                rules: {
                    name: [
                        {required: true, message: '请输入类型名', trigger: 'blur'}
                    ],
                    description: [
                        {required: true, message: '请输入类型描述', trigger: 'blur'}
                    ],
                    img: [
                        {required: true, message: '请输入分类图片', trigger: 'blur'}
                    ]
                },
                ruleForm: {
                  name: ''
                }
            }
        },
        created(){
            this.getData();
        },
        mounted(){
            this.editDialogFormVisible=false;
            // $(".el-dialog").css("width","550px");
        },
        methods: {
            handleCurrentChange(val){
                this.listQuery.pageNumber = val
                this.getData();
            },
            handleSizeChange(val){
                this.listQuery.pageSize = val
                this.getData();
            },
            handleFilter(){
                this.listQuery.pageNumber = 1
                this.getData()
            },
            getData(){
                let self = this;
                var arr = self.pids;
                self.pid = arr[arr.length - 1];
                this.listQuery.param.pid=arr[arr.length - 1];
                self.myajax("/kind/list",this.listQuery,function(res){
                    console.log(res)
                    if(res.code==1000){
                        self.tableData=res.data.list;
                        self.total=res.data.total;
                    }
                });
            },
            deleteKind(id) {
                let self = this;
                var data={};
                data.pageSize=self.page_size;
                data.pageNumber=self.cur_page;
                data.id=id;
                self.myajax("/kind/deleteKind/"+id,data,function(data){
                   self.tableData=data.data.list;
                   self.total=data.data.total;
                });

            },
            handleEdit(index, row) {
                let self = this;
                var param = {};
                param.id = self.pid;
                self.myajax("/kind/findBrothersById",param,function(data){
                    self.parentOption=data.data.list;
                });
                self.selectDisabled=false;
                self.dailogTitle = '更改信息';
                self.entityForm.id = row.id;
                self.entityForm.pid = row.pid;
                self.entityForm.name = row.name;
                self.entityForm.description = row.description;
                // self.entityForm.disabled = row.disabled+"";
                self.entityForm.img = row.img;
                self.editDialogFormVisible = true;
            },
            handleDelete(index, row) {
                this.del(row.id);
            },
            handleTouch(newTouch,id){
                this.setTouch(newTouch,id);
            },
            del(id) {
                var self=this;
                var ids = new Array();
                if (id) {
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }
                self.$confirm('确定要删除这'+ ids.length +'项吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={ids:ids}; 
                    self.myajax("/kind/delete",data,function(data){
                        var code=data.code;
                        if(code==1000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            setTouch(newTouch,id) {
                var self=this;
                var touch = newTouch===1 ? 1 : 0; //禁用状态只支持两个值

                var ids = new Array();
                if (id) {
                    ids.push(id);
                }else{
                    if(self.multipleSelection.length==0){
                        self.$notify({title: '提示',message: '请先选择',type: 'warning'});
                        return;
                    }
                    for(var k in this.multipleSelection){
                        ids.push(this.multipleSelection[k].id);
                    }
                }
                self.$confirm('确定要更改这'+ ids.length +'项吗？', {
                    confirmButtonText: '确定',
                    cancelButtonText: '取消',
                    type: 'warning'
                }).then(() => {
                    var data={ids:ids,type:touch}; 
                    self.myajax("/kind/touch",data,function(data){
                        var code=data.code;
                        if(code==1000){
                            self.$notify({title: '提示',message: "成功",type: 'success'});
                        }else{
                            self.$notify({title: '提示',message:data.msg,type: 'error'});
                        }
                        self.getData();
                    });
                });
            },
            add() {
                let self = this;
                var param = {};
                param.id =self.pid;
                self.myajax("/kind/findById",param,function(data){
                    self.parentOption=data.data;
                });
                self.selectDisabled=true;
                self.dailogTitle = '添加产品类型';
                self.entityForm.id = '';
                self.entityForm.pid = self.pid;
                self.entityForm.name = '';
                self.entityForm.recommend = '';
                self.entityForm.description = '';
                self.entityForm.img = '';
                // self.entityForm.icon = '';
                // $("#icon").html("正面");
                self.editDialogFormVisible = true;
            },
            saveUpdate(){
                let self = this;
                self.$refs['entityForm'].validate((valid) => {
                    if (valid) {
                        self.$confirm('确定要保存吗？', {
                            confirmButtonText: '确定',
                            cancelButtonText: '取消',
                            type: 'warning'
                        }).then(() => {
                            self.saveOrUpdate();
                        });
                    }
                });        
            },
            saveOrUpdate() {
                let self = this;
                var url = "/kind/create";
                var data = {};
                data.id = self.entityForm.id;
                data.name = self.entityForm.name;
                data.img = self.entityForm.img;
                // data.pid = self.pid;
                data.pid = self.entityForm.pid;
                data.description = self.entityForm.description;
                if (data.id) {
                    url = "/kind/update";
                }
                this.myajax(url,data,function(){
                    self.editDialogFormVisible = false;
                    self.getData();
                });
            },
            handleSelectionChange(val) {
                this.multipleSelection = val;
            },
            setValue1(value){
                this.entityForm.img="";
                if(value){
                    this.entityForm.img = Vue.prototype.$host + value;
                }
            },
            //跳转子目录
            myRouter(id){
                let self = this;
                self.pids.push(id);
                self.watchPids();
                self.getData();
            },
            //返回上一层
            back(){
                this.pids.pop();
                this.watchPids();
                this.getData();
            },
            //监听数组长度
            watchPids(){
                let self = this;
                if (self.pids.length==1) {   
                    self.isButtom = true;
                    self.isBack=false;
                }else if (self.pids.length==0) {
                    self.isButtom = false;
                    self.isBack=true;
                }else{
                    self.isButtom = true;
                    self.isBack=false;
                }
            },
            formatterCreateDate(row,column){
                var date = row.createDate;  
                if (date == undefined) {  
                    return "";  
                } 
                return new Date(date).format("yyyy-MM-dd hh:mm");
            },
        }
    }
</script>


<style scoped>
    img{
        height:40px;
    }
    .avatar-uploader .el-upload {
      border: 1px dashed #d9d9d9;
      border-radius: 6px;
      cursor: pointer;
      position: relative;
      overflow: hidden;
    }
    .avatar-uploader .el-upload:hover {
      border-color: #20a0ff;
    }
    .avatar-uploader-icon {
      font-size: 28px;
      color: #8c939d;
      width: 178px;
      height: 178px;
      line-height: 178px;
      text-align: center;
    }
    .avatar {
      width: 178px;
      height: 178px;
      display: block;
    }
    .input_edit{
        width: 200px;
        float: left;
        margin-right:10px;
    }
    .cell{
        padding: 0 5px !important;
        overflow: auto;
    }
</style>

